
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"> 
$(function(){
	
	// 移到留言上可以删除,编辑-------------------------------------------
		$('#mian .list .onep').hover(function() {
			$(this).find('a').show();
			$(this).find('.edit_a').show();
			$(this).find('.content').addClass('content1');
		}, function() {
			$(this).find('a').hide();
			$(this).find('.edit_a').hide();
			$(this).find('.content').removeClass('content1');
		});

   // 留言方式的切换------------------------------------------------
		var c=1;
		$('.close').click(function(event) {
			if(c==1){
				$('#right').stop().animate({"top": 800+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": 0+'px'},3000);
				c=0;
			}else{
				$('#right').stop().animate({"top": 50+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": -120+'px'},3000);
				c=1;
			}
		});

	
	
});
             function onUpdate(id){
                    //alert("你点击了修改元素！"+id)；
                    var URL = "get_row_byid.php";
                    var URL2 = "update_form.php";
                    var form = $('#right form');
                    form.prop('action',URL2);
                    form.prepend('<input type="hidden" name="id" value="'+id+'"/>');
                     $('#right input[type="submit"]').val('更新');
                     $.get(URL,{sid:id},function(data){
                         var data = eval("("+ data +")");
                         if(data.status===1){
                          info = data.info;
                         // var form = $('#right from');
                          //var strxy = "";
                          //strxy +='<input type="hidden" name="id" value="'+id+'"/>';
                            $('input[name="username"]').val(info.username);
                            $('textarea[name="message"]').text(info.content);
                         
                         //男和女的选择
                            var sexEle = $("#right input:radio[name='sex']");
                            for(i=0;i<2;i++){
                                if(sexEle.eq(i).val()===info.sex){
                                    sexEle.eq(i).prop("checked",true);
                                }
                            };
                            //头像的选择
                             var contentEle = $("#right input:radio[name='imgurl']");
                            for(i=1;i<5;i++){
                                str = "images/"+i+".jpg";
                                if(str===info.avater){
                                    contentEle.eq(i-1).prop("checked",true);
                                }
                            }



                           }else{
                               alert('没有符合条件的数据信息');
                        };
                    });
                }
</script>

</head>

<body>
<div id="top">
		<h1>留言板
                <?php
                /*$name1 = "左右";
                $name2 = "铭";
                echo $name1. "".$name2;*/
                ?></h1>
</div>

<div id="mian_out">
	  <div id="mian">
              <h2>其它人都说了什么<h2>
			<ul class="list">
      				
                                   <?php
                                   
                                                   require_once 'conn.php';
                                                  $sql = "select * from t_message";
                                                  $result = $conn->query($sql);?>
                                                          
                                   <?php   if ($result ->num_rows > 0) :                                                              
                                   
                                       //$pic  = '<img src="images/2.jpg" alt="" />';
                                       //$name = "吴志培";
                                       //$content = '人如果没有了理想和梦想，那跟咸鱼有什么区别。                    <span> (来自火星"女侠"的留言)</span>';

                                       //$message = array(
                                          // array( 'pic' => '<img src=" images/2.jpg" alt="" />'),
                                          // array('name' => '吴志培'),
                                          // array('content' => '人如果没有了理想和梦想，那跟咸鱼有什么区别。')
                                   ?> 
                            <?php
                            $rows = $result -> fetch_all(MYSQLI_ASSOC);
                            foreach ($rows as $row):   ?> 
                                                                  
                                      <li class="onep">
                                                   <p class="pic"><img src="<?php echo $row['avater'];  ?>" alt=""></p>
                                                   <p class="name"><?php echo $row['username']; ?></p>
                                                   <p class="content"><?php echo $row['content'];  ?>
                                                   </p>   
                                        <a class="edit_a" href="javascript:" onclick="onUpdate(<?php echo $row['id']; ?>)" >修改</a>
					<a class="delete" href="javascript:" onclick="if(confirm('确定删除吗？')) location.href='delete2.php?id=<?php echo $row['id']?>'" >删除</a>
				</li>
                                
                                <?php   endforeach; ?>
                                <?php   else:    ?>
                                                             <p>0个结果</p>
                                 <?php  endif; ?>
                                  </ul>
                          
</div>
   
   <div id="right">
			<h2>留下你的脚步吧</h2>
			<form action="upadd2.php" method="post">
				<p class="one">
				昵称:<input class="name" name="username" type="text" placeholder="你的名字" />
				<input type="radio" name="sex" value="男" checked="checked" />男侠
				<input type="radio" name="sex" value="女" />女侠
				</p>
				<p><textarea name="message" placeholder="这个人很懒,什么都没有写" ></textarea></p>
				<p class="tow">
					<input type="radio" name="imgurl" value="images/1.jpg" checked="checked" /><img src=" images/1.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/2.jpg" /><img src=" images/2.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/3.jpg" /><img src=" images/3.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/4.jpg" /><img src=" images/4.jpg" alt="" />
				</p>
				<p class="thr"><input class="btn" type="submit" value="提交" /></p>
			</form>
			<div class="close"></div>
</div>
   
</div>

<div id="bottom_out">
		<div id="bottom">
			<form action="upadd2.php" method="post">
				<p class="one">
				昵称:<input class="name" name="username" type="text" placeholder="大爷你的名字" />
				<br/><br/>
				<input type="radio" name="sex" value="男" checked="checked" />男侠
				<input type="radio" name="sex" value="女" />女侠
				</p>
				<p><textarea name="message" placeholder="这个人很懒,什么都没有写" ></textarea></p>
				<p class="tow">
                                    <?php  $cars = array(1,2,3,4); ?>
                                    <?php foreach ($cars as $value):  ?> 
                                           <input type="radio" name="imgurl" value="images/<?php echo $value; ?>.jpg" /><img src=" images/<?php echo $value; ?>.jpg" alt="">
                                                               
                                    <?php  endforeach;  ?>                                
					<!--input type="radio" name="imgurl" value="images/1.jpg" checked="checked" /><img src=" images/1.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/2.jpg" /><img src=" images/2.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/3.jpg" /><img src=" images/3.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/4.jpg" /><img src=" images/4.jpg" alt="" /-->
				</p>
				<p class="thr"><input class="btn" type="submit" value="提交" /></p>
			</form>
			<div class="close"></div>
		</div>
</div>

</body>
</html>
